先來看一段簡單的 code

<form onSubmit={handleSubmit}>
  ...
  <button onClick={handleCancel}>取消</button>
  <button type="submit">送出</button>
</form>

執行看看，你會發現明明按了「取消」，form 還是 submit 了
你發現問題在哪了嗎？

button type

其實 type="submit" 在上面的情形中是不需要的，因為預設在 form 下面的 button type 就會是 submit
而且這不是 ReactJS 所導致的行為，而是 HTML 中 button 的預設行為

所以把

<button onClick={handleCancel}>取消</button>

改成

<button type="button" onClick={handleCancel}>取消</button>

就不會發生按了「取消」卻觸發 submit 的情形了

後記

這篇好像不算 ReactJS 的疑難排解，但卻是我時常忘記的一點，再加上以前一直以為這是 ReactJS 的雷，剛剛一查才發現是 button 的預設行為。

另外，我想時常會下意識的寫出 type="submit" 應該是因為大多數的 UI Library 怕大家也會踩到這個雷，所以都把 Button Component 的 default type prop 強制寫為 button 了，至於好還是不好就見仁見智了。

才寫到第三篇就快沒想法了， 希望可以撐完 30 天 (´・ω・`)